<template>
	<view class="zhi_liao_info_box">
		<view class="tab_header_box">
			<view class="item">
				<text class="vertical_text mn">ᠡᠪᠡᠳᠴᠢᠨ᠎ᠦ ᠨᠡᠷᠡᠢᠳᠦᠯ</text>
			</view>
			<view class="item">
				<text class="vertical_text mn">ᠲᠣᠳᠤᠷᠬᠠᠢᠯᠠᠯ</text>
			</view>
			<view class="item">
				<text class="vertical_text mn">ᠡᠪᠡᠳᠴᠢᠯᠡᠭᠰᠡᠨ ᠴᠠᠭ</text>
			</view>
		</view>
		
		<!-- 循环 -->
		<view class="tab_body_box">
			<view class="tab_body" v-for="(item, indx) in morList" :key="index">
				<view class="item">
					<text class="vertical_text mn">{{ item.contentMn }}</text>
				</view>
				<view class="item">
					<text class="vertical_text mn">{{ item.titleMn }}</text>
				</view>
				<view class="item">
					<text class="time">{{ item.createTime }}</text>
				</view>
			</view>
		</view>
		
		
		<!-- 添加 icon -->
		<view class="add_btn_box">
			<i class="iconfont icon-tianjiatupianlimianjiahao color_fff fs_40_i" @click="addZhiLiao()"></i>
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		props: {
			breedingId: String,
		},
		data() {
			return {
				morList: []
			}
		},
		mounted() {
			this.getMorList(this.breedingId)
		},
		methods: {
			// 获取治疗列表
			getMorList(id) {
				NET.request(API.getYangZhiMor, { breedingId: id }, 'GET')
				.then(res => {
					console.log('获取治疗信息 : ', res)
					if (res.code == 200) {						
						this.morList = res.data
					}
				})
				.catch(err => {
					console.error('获取治疗信息失败！', err)
				})
			},
			
			// 前往 添加治疗 页面
			addZhiLiao() {
				uni.navigateTo({
					url: `/subcontract/yang-zhi-dang-an/add-zhi-liao?id=${this.breedingId}`,
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.zhi_liao_info_box {
		width: 100%;
		
		.tab_header_box {
			width: 100%;
			height: 140rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			border-bottom: 1px solid #ccc;
			margin-top: 10rpx;
			
			.item {
				font-size: 40rpx;
				height: 100rpx;
				white-space: normal;
			}
		}
		
		.tab_body_box {
			width: 100%;
			height: 90%;
			overflow-y: auto;
			
			.tab_body {
				width: 100%;
				height: 140rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				border-bottom: 1px solid #ccc;
				padding-left: 50rpx;
				box-sizing: border-box;
				
				.item {
					width: 30%;
					font-size: 40rpx;
					height: 100rpx;
					white-space: normal;
					
					.time { font-size: 26rpx; }
				}
			}
		}
		
		.add_btn_box {
			width: 96%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 8rpx;
			background-color: #1c9aa0;
			position: fixed;
			bottom: 10rpx;
			left: 2%;
		}
	}
</style>